{% extends "VozminoskiStoreBundle::layout.html.twig" %}
{% block content %}
<form action="{{ path('purchase') }}" method="post" id="small-product-form" class="product-form">
    <div class="wrap bottom-roundness"></div>

    <div id="menu" class="wrap">
        <ul class="menu">
            <li class="active"><a href=""><span>Ваши покупки</span></a></li>
            <li><a href="{{ path('home') }}"><span>На главную</span></a></li>
        </ul>

        <div id="cart">
            <a href="#" class="count">{{ cart|length }}</a>
            <a href="{{ path('cart') }}">Корзина</a>
        </div>
    </div>

    <div id="cart" class="stitched wrap">
        <table class="cart">
            {% for cartItem in cart %}
            <tr class="cart-row">
                <td>
                    <div class="thumb">
                        <a href="{{ path('catalog', { 'url': cartItem.product.category.url }) }}#product-{{ cartItem.product.id }}">
                            <img src="{{ cartItem.product.getWebPath() | apply_filter('cart_product')}}" alt="" />
                        </a>
                    </div>
                </td>
                <td class="description">
                    <h2><a href="{{ path('catalog', { 'url': cartItem.product.category.url }) }}#product-{{ cartItem.product.id }}">{{ cartItem.product.name }}</a></h2>
                    <p class="cufon">{{ cartItem.product.description }}</p>
                    <table>
                        <tr>
                            {% for name, value in cartItem.product.getUnserializeComposition %}
                                <td class="cufon">{{ value }}% {{ name }}</td>
                            {% endfor %}
                        </tr>
                    </table>
                </td>
                <td class="quantity">
                    <table>
                        <tr class="h">
                            <td class="cufon">Кол-во</td>
                            <td class="q">
                                <button type="" class="items-minus">-</button>
                                <div class="select-bg grey">
                                    <div class="slyled-w product-count-block">
                                        <input type="hidden" name="items[{{ loop.index }}][product_id]" value="{{ cartItem.product_id }}">
                                        <input type="text" name="items[{{ loop.index }}][count]" value="{{ cartItem.count }}" class="product-count" />
                                        <input type="hidden" class="product-price" value="{{ cartItem.product.price }}">
                                        <input type="hidden" class="product-discounts" value="{{ cartItem.product.getUnserializeDiscount|json_encode()  }}">
                                    </div>
                                </div>
                                <button type="button" class="items-plus">+</button>
                            </td>
                        </tr>
                        <tr class="h">
                            <td class="cufon">Цвет</td>
                            <td>
                                <div class="select-bg grey">
                                    <div class="slyled-w">
                                        <select class="styled" name="items[{{ loop.index }}][color]">
                                            {% for color in cartItem.product.colors %}
                                                <option {% if cartItem.color == color.id %}selected="selected"{% endif %} value="{{ color.id }}" >{{ color.name }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr class="h">
                            <td class="cufon">Размер</td>
                            <td>
                                <div class="select-bg grey">
                                    <div class="slyled-w">
                                        <select class="styled" name="items[{{ loop.index }}][size]">
                                            {% for size in cartItem.product.sizes %}
                                                <option {% if cartItem.size == size.id %}selected="selected"{% endif %} value="{{ size.id }}">{{ size }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </table>
                </td>
                <td class="price">
                    <del class="cufon total-item-price">
                    {{ cartItem.product.getPricePerNumberItems(cartItem.count) }} <small>P</small>
                    </del>
                    <a href="{{ path('delete_cart_item', { 'number': loop.index-1 }) }}" class="delete-product-row">
                        <img src="{{ asset('img/del.jpg') }}"/>
                    </a>
                </td>

            </tr>
            <tr>
                <td colspan="4" class="divider"><hr /></td>
            </tr>
            {% endfor %}
            <tr>
                <td colspan="4" class="total">
                    <div style="float: right;">
                        <p class="h cufon">всего</p><h2 id="total-price" class="cufon">{{ totalPrice }} <small>P</small></h2>
                    </div><br />
                    {%  if cart|length %}
                    <h3 class="featured-product show-personal-info-popup">
                        <a class="order" href="javascript:void(0)"">
                            <img src="{{ asset('img/order.png') }}" alt="" />
                        </a>
                    </h3>
                    {% endif %}
                </td>
            </tr>
        </table>
    </div>

    <div id="product-popup" style="display: block">
        <div class="bg"></div>
        <div class="popup">
            <div class="popup-top"></div>
            <div class="popup-content">
                <a class="close cufon" href="javascript:void(0)">закрыть</a>
                <!-- персональные данные -->
                <div style="padding-top:30px;">
                    <h2 class="cufon">Персональные данные</h2>
                    <div style="width:400px;">
                        <div class="input-bg grey">
                            <div class="slyled-w">
                                {{ form_errors(addressForm.name) }}
                                 {{ form_widget(addressForm.name, { 'attr': {
                                    'onfocus' : "if(this.value == this.defaultValue) this.value=''",
                                    'onblur' : "if(this.value=='')this.value=this.defaultValue",
                                    'class': 'input',
                                    'value': 'Имя'
                                 } }) }}
                            </div>
                        </div>

                        <div class="input-bg grey">
                            <div class="slyled-w">
                                {{ form_widget(addressForm.surname, { 'attr': {
                                    'onfocus' : "if(this.value == this.defaultValue) this.value=''",
                                    'onblur' : "if(this.value=='')this.value=this.defaultValue",
                                    'class': 'input',
                                    'value': 'Фамилия'
                                } }) }}
                            </div>
                        </div>

                        <div class="input-bg grey">
                            <div class="slyled-w">
                                {{ form_widget(addressForm.phone, { 'attr': {
                                    'onfocus' : "if(this.value == this.defaultValue) this.value=''",
                                    'onblur' : "if(this.value=='')this.value=this.defaultValue",
                                    'class': 'input',
                                    'value': 'Телефон'
                                } }) }}
                            </div>
                        </div>

                        <div class="input-bg grey">
                            <div class="slyled-w">
                                {{ form_widget(addressForm.email, { 'attr': {
                                    'onfocus' : "if(this.value == this.defaultValue) this.value=''",
                                    'onblur' : "if(this.value=='')this.value=this.defaultValue",
                                    'class': 'input',
                                    'value': 'E-mail'
                                } }) }}
                            </div>
                        </div>

                    </div>
                </div>

                <!-- адрес -->
                <div style="padding-top:30px;">
                    <h2 class="cufon">Адрес доставки</h2>
                    <div style="width:400px;">

                        <div class="input-bg grey">
                            <div class="slyled-w">
                                {{ form_widget(addressForm.city, { 'attr': {
                                    'onfocus' : "if(this.value == this.defaultValue) this.value=''",
                                    'onblur' : "if(this.value=='')this.value=this.defaultValue",
                                    'class': 'input',
                                    'value': 'Город'
                                } }) }}
                            </div>
                        </div>

                        <div class="input-bg grey">
                            <div class="slyled-w">
                                {{ form_widget(addressForm.address, { 'attr': {
                                'onfocus' : "if(this.value == this.defaultValue) this.value=''",
                                'onblur' : "if(this.value=='')this.value=this.defaultValue",
                                'class': 'input',
                                'value': 'Адрес'
                                } }) }}
                            </div>
                        </div>


                        <div class="input-bg grey" style="width:196px; float:left;">
                            <div class="slyled-w">
                                {{ form_widget(addressForm.building, { 'attr': {
                                    'onfocus' : "if(this.value == this.defaultValue) this.value=''",
                                    'onblur' : "if(this.value=='')this.value=this.defaultValue",
                                    'class': 'input',
                                    'value': 'Номер дома'
                                } }) }}
                            </div>
                        </div>

                        <div class="input-bg grey" style="width:196px; float:left; margin-left:7px;">
                            <div class="slyled-w">
                                {{ form_widget(addressForm.flat, { 'attr': {
                                    'onfocus' : "if(this.value == this.defaultValue) this.value=''",
                                    'onblur' : "if(this.value=='')this.value=this.defaultValue",
                                    'class': 'input',
                                    'value': 'Номер квартиры/офиса'
                                } }) }}
                            </div>
                        </div>
                        <div style="clear:both;"></div>
                    </div>
                </div>

                <!-- способ оплаты/кнопка -->
                <div style="padding-top:30px;">
                    <h2 class="cufon">Способ оплаты</h2>
                    <div class="sale">
                        <div style="float:left;">
                            <input type="radio" name="payment_type" value="0" checked="checked"><span class="cufon">Наличными курьеру</span></div>
                        <div style="float:left; padding-left:17px;">
                            <input type="radio" name="payment_type" value="1"><span class="cufon">Электронным платежом</span></div>
                        <div style="clear:both;"></div>
                    </div>

                    <div style="padding-top:30px;" class="purchase">
                        <a class="order" href="">
                            <img src="{{ asset('img/order.png') }}" alt="" />
                        </a>
                    </div>
                </div>
            </div>
            <div class="popup-bottom"></div>
        </div>
    </div>
    {{ form_rest(addressForm) }}
</form>

    <script type="text/javascript">
        $().ready(function() {
            jQuery.validator.addMethod("name", function(value, element) {
                return !element.required || !(element.value == element.defaultValue);
            }, 'Поле не должно быть пустым');

            $("#small-product-form").validate();
        });

        jQuery.extend(jQuery.validator.messages, {
            required: "Поле не должно быть пустым.",
            remote: "Please fix this field.",
            email: "Please enter a valid email address.",
            url: "Please enter a valid URL.",
            date: "Please enter a valid date.",
            dateISO: "Please enter a valid date (ISO).",
            number: "Please enter a valid number.",
            digits: "Please enter only digits.",
            creditcard: "Please enter a valid credit card number.",
            equalTo: "Please enter the same value again.",
            accept: "Please enter a value with a valid extension.",
            maxlength: jQuery.validator.format("Please enter no more than {0} characters."),
            minlength: jQuery.validator.format("Please enter at least {0} characters."),
            rangelength: jQuery.validator.format("Please enter a value between {0} and {1} characters long."),
            range: jQuery.validator.format("Please enter a value between {0} and {1}."),
            max: jQuery.validator.format("Please enter a value less than or equal to {0}."),
            min: jQuery.validator.format("Please enter a value greater than or equal to {0}.")
        });

    </script>
{% endblock %}

